import React, { useState } from "react";
import { Cell, DatetimePicker, Popup } from "react-vant";
import "./DateSelect.css";

const DateSelect = ({ value, onChange }) => {
  const [showPicker, setShowPicker] = useState(false);

  const handleConfirm = (date) => {
    onChange(date);
    setShowPicker(false);
  };

  return (
    <div className="date-select">
      <Cell onClick={() => setShowPicker(true)}>
        <div className="date-input">
          {/* 使用普通的 span 替代图标 */}

          <span className={value ? "has-value" : "placeholder"}>
            {value || "选择时间周期"}
          </span>
          <span className="calendar-icon">📅</span>
        </div>
      </Cell>

      <Popup
        visible={showPicker}
        position="bottom"
        round
        onClose={() => setShowPicker(false)}
      >
        <DatetimePicker
          type="date"
          title="选择时间周期"
          value={value}
          onConfirm={handleConfirm}
          onCancel={() => setShowPicker(false)}
          minDate={new Date(2020, 0, 1)}
          maxDate={new Date(2025, 11, 31)}
          formatter={(type, val) => {
            if (type === "year") {
              return `${val}年`;
            }
            if (type === "month") {
              return `${val}月`;
            }
            if (type === "day") {
              return `${val}日`;
            }
            return val;
          }}
        />
      </Popup>
    </div>
  );
};

export default DateSelect;
